<ng-container *ngIf="!tooltip; else hasTooltip">
  <cds-icon
    [style]="iconStyle != '' ? iconStyle : null"
    [attr.shape]="shape"
    [attr.size]="size"
    [attr.direction]="direction"
    [attr.flip]="flip"
    [attr.solid]="isSolid ? true: null"
    [attr.status]="status"
    [attr.inverse]="isInverse ? true: null"
    [attr.badge]="badge"
    [attr.aria-label]="label"
  ></cds-icon>
</ng-container>

<ng-template #hasTooltip>
  <a href="javascript:void(0)" role="tooltip" aria-haspopup="true" class="{{ tooltipClass }}">
    <cds-icon
      [style]="iconStyle != '' ? iconStyle : null"
      [attr.shape]="shape"
      [attr.size]="size"
      [attr.direction]="direction"
      [attr.flip]="flip"
      [attr.solid]="isSolid ? true: null"
      [attr.status]="status"
      [attr.inverse]="isInverse ? true: null"
      [attr.badge]="badge"
      [attr.aria-label]="label"
    ></cds-icon>
    <span class="tooltip-content">{{ tooltip.message }}</span>
  </a>
</ng-template>
